import React, { Component } from 'react'
import { Text, View, Animated, TouchableHighlight } from 'react-native'
import Slider from '@react-native-community/slider'
import Video from 'react-native-video';
import { linear } from 'react-native/Libraries/Animated/Easing'
import AntDesign from 'react-native-vector-icons/AntDesign'
import Title from './title'
import { Button } from '@ant-design/react-native';
let musicDataUrl = "http://39.100.242.209:3000/albums"

let playUrl = "http://39.100.242.209/mp3/"
export default class App extends Component {
	state = {
		musics: [], mIndex: 0, paused: true, duration: 0, currentTime: 0,
		rotate: new Animated.Value(0),
		like: false
	}
	componentDidMount() {
		this.props.navigation.addListener('focus', () => {
			fetch(musicDataUrl).then(resp => resp.json())
				.then(musics => this.setState({ musics }))
		})
	}
	_playOrPause = () => {
		let an = Animated.loop(Animated
			.timing(this.state.rotate, { toValue: 360, duration: 5000, easing: linear })
		)
		if (this.state.paused) {
			an.start()
		} else {
			an.stop()
		}
		this.setState(state => ({ paused: !state.paused }))
	}
	_seek = m => {
		this.player.seek(m)
	}
	_end = () => {
		let len = this.state.musics.length
		this.setState(state => ({ mIndex: (state.mIndex + len + 1) % len }))
	}
	_begin = () => {
		let len = this.state.musics.length
		this.setState(state => ({ mIndex: (state.mIndex + len - 1) % len }))
	}
	_likeChange = () => {
		let like = this.state.like
		if (like) {
			like = false
		} else {
			like = true
		}
		this.setState({ like })
	}
	render() {
		let { musics, mIndex } = this.state

		let style = {
			transform: [{
				rotate: this.state.rotate.interpolate({
					inputRange: [0, 360], outputRange: ['0deg', '360deg']
				})
			}]
		}

		return (
			<View >
				<Title />
				<View style={{ backgroundColor: 'skyblue' }}>
					<View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
						<Text style={{ fontSize: 40, marginTop: 30 }}>《{this.state.musics[this.state.mIndex]?.name}》
						</Text>
						<Text style={{ fontSize: 15, color: 'deepgray', marginTop: 15 }}>演唱：{this.state.musics[this.state.mIndex]?.singer}
						</Text>
					</View>
					<View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: 30 }}>
						<Video ref={ref => this.player = ref} paused={this.state.paused}
							onEnd={this._end}
							onLoad={({ duration }) => this.setState({ duration })}
							onProgress={({ currentTime }) => this.setState({ currentTime })}
							source={{ uri: playUrl + musics[mIndex]?.name + ".mp3" }} />

						<Animated.Image style={[{ width: 200, height: 200, borderRadius: 100 }, style]}
							source={{ uri: playUrl + musics[mIndex]?.name + ".jpeg" }} />
					</View>
					<View style={{ display: 'flex', flexDirection: 'row', marginTop: 25, marginLeft: 220 }}>
						<AntDesign name="heart" size={35} onPress={() => this._likeChange()} color={'red'}><Text>喜</Text></AntDesign>
						<AntDesign name="heart" size={35} onPress={() => this._likeChange()} color={'grey'}><Text>不</Text></AntDesign>

					</View>
					<View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'row', marginTop: 50 }}>
						<TouchableHighlight onPress={this._begin}
							style={{
								display: 'flex', justifyContent: 'center', alignItems: 'center',
								borderColor: 'transparent', borderWidth: 2, borderRadius: 10
							}}>
							<Text style={{ fontSize: 50, marginRight: 60 }}>&lt;</Text>
						</TouchableHighlight>

						<Button style={{ fontSize: 48, }} onPress={this._playOrPause}>{this.state.paused ? "播放" : "暂停"}</Button>
						<TouchableHighlight onPress={this._end}
							style={{
								display: 'flex', justifyContent: 'center', alignItems: 'center',
								borderColor: 'transparent', borderWidth: 2, borderRadius: 10
							}}>
							<Text style={{ fontSize: 50, marginLeft: 60 }}>&gt;</Text>
						</TouchableHighlight>
					</View>
					<Slider style={{ marginTop: 62 }} onSlidingComplete={this._seek} maximumValue={this.state.duration}
						value={this.state.currentTime} />
				</View></View>
		)
	}
}